<!--
	This example shows your strava activities in a leaflet map. Requires the strava datasource
-->
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/leaflet@1.6.0/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"
   integrity="sha512-gZwIG9x3wUXg2hdXF6+rVkLF/0Vi9U8D2Ntg4Ga5I5BZpVkVxlJWbSQtXPSiUTtC0TjtGOmxa1AJPuV0CPthew=="
   crossorigin=""></script>
<script src="https://cdn.jsdelivr.net/npm/polyline-encoded@0.0.9/Polyline.encoded.js"></script>
</head>

<body>
<div id="mapid"></div>

<script>
	function onDivPanelInit() {
		console.log("I'm an init function", typeof L);
		const mymap = L.map('mapid');
		window.mymap = mymap;

		L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
			maxZoom: 18,
			attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
				'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
				'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
			id: 'mapbox/streets-v11',
			tileSize: 512,
			zoomOffset: -1
		}).addTo(mymap);
		window.polylineLayer = L.featureGroup();
	}
	 
	function addPolyline(encoded, layer) {
		var coordinates = L.Polyline.fromEncoded(encoded).getLatLngs();
		console.log("got coordinates", coordinates);
		console.log("polyline layer", layer);
		L.polyline(coordinates).addTo(layer);
		console.log("applied to layer", layer);
		console.log("mymap", window.mymap);
		polylineLayer.addTo(window.mymap);
	};

	function onDivPanelDataUpdate(data) {
		console.log("I'm a data updater that got data", data);
		const polylineLayer = window.polylineLayer;
		const series = data.map(dataItem => {
			return addPolyline(dataItem.meta.map.summary_polyline, polylineLayer);
		});

		mymap.fitBounds(polylineLayer.getBounds());
	};
</script>
</body>
</html>